<template>
  <div>
    <carousel></carousel>
    <div class="content">
      <div class="content-item">
        <el-row style="justify-content: space-between">
          <el-col :span="15">
            <div>
              <div class="title">
                <div class="title-item">
                  <img class="iconcss" src="@/assets/icon/图标 1@2x.png" />
                  &nbsp;&nbsp;&nbsp; 政策法规
                </div>
                <span class="gdCss"> 更多> </span>
              </div>
              <div class="mainCss">
                <img
                  style="width: 280px; height: 340px; margin-top: 30px"
                  src="@/assets/img/轮播图 2@2x.png"
                />
                <div class="right">
                  <div class="text">
                    <div class="text-title">新闻动态标题文字</div>
                    <div style="display: flex; justify-content: space-between">
                      <div class="text-nr">
                        1111水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水
                      </div>
                      <div class="text-time">2025年03月10日</div>
                    </div>
                  </div>
                  <div class="text">
                    <div class="text-title">新闻动态标题文字</div>
                    <div style="display: flex; justify-content: space-between">
                      <div class="text-nr">
                        1111水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水
                      </div>
                      <div class="text-time">2025年03月10日</div>
                    </div>
                  </div>
                  <div class="text">
                    <div class="text-title">新闻动态标题文字</div>
                    <div style="display: flex; justify-content: space-between">
                      <div class="text-nr">
                        1111水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水
                      </div>
                      <div class="text-time">2025年03月10日</div>
                    </div>
                  </div>
                  <div class="text">
                    <div class="text-title">新闻动态标题文字</div>
                    <div style="display: flex; justify-content: space-between">
                      <div class="text-nr">
                        1111水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水
                      </div>
                      <div class="text-time">2025年03月10日</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8" style="padding-right: 0">
            <div class="title">
              <div class="title-item">
                <img class="iconcss" src="@/assets/icon/图标 1@2x.png" />
                &nbsp;&nbsp;&nbsp; 考试计划
              </div>
              <span class="gdCss"> 更多> </span>
            </div>
            <div class="exam-right">
              <div class="exam-item">
                <div class="dot"></div>
                <div class="exam-text">
                  哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                </div>
                <div class="exam-time">20202020</div>
              </div>
              <div class="exam-item">
                <div class="dot"></div>
                <div class="exam-text">
                  哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                </div>
                <div class="exam-time">20202020</div>
              </div>
              <div class="exam-item">
                <div class="dot"></div>
                <div class="exam-text">
                  哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                </div>
                <div class="exam-time">20202020</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="content-item">
        <el-row :gutter="80">
          <el-col :span="12">
            <div class="title">
              <div class="title-item">
                <img class="iconcss" src="@/assets/icon/图标 1@2x.png" />
                &nbsp;&nbsp;&nbsp; 职业标准
              </div>
              <span class="gdCss"> 更多> </span>
            </div>
            <div class="imgbox">
              <div class="img-item">
                <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                <div class="img-text">图片描述文字1</div>
              </div>
              <div class="img-item">
                <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                <div class="img-text">图片描述文字2</div>
              </div>
              <div class="img-item">
                <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                <div class="img-text">图片描述文字2</div>
              </div>
              <div class="img-item">
                <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                <div class="img-text">图片描述文字2</div>
              </div>
              <div class="img-item">
                <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                <div class="img-text">图片描述文字2</div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="title">
              <div class="title-item">
                <img class="iconcss" src="@/assets/icon/图标 1@2x.png" />
                &nbsp;&nbsp;&nbsp; 鉴定教材
              </div>
              <span class="gdCss"> 更多> </span>
            </div>
            <div class="imgbox">
              <div class="img-item">
                <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                <div class="img-text">图片描述文字1</div>
              </div>
              <div class="img-item">
                <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                <div class="img-text">
                  图片描顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶述文字2
                </div>
              </div>
              <div class="img-item">
                <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                <div class="img-text">图片描述文字2</div>
              </div>
              <div class="img-item">
                <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                <div class="img-text">图片描述文字2</div>
              </div>
              <div class="img-item">
                <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                <div class="img-text">图片描述文字2</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="content-item">
        <div>
          <div class="title">
            <div class="title-item">
              <img class="iconcss" src="@/assets/icon/图标 1@2x.png" />
              &nbsp;&nbsp;&nbsp; 培训机构资质
            </div>
            <span class="gdCss"> 更多> </span>
          </div>
          <div class="agencies-item">
            <img style="margin-right: 30px" src="@/assets/img/图片 5@1x.png" />
            <div class="agencies-right">
              <div class="agencies-title">某某培训机构</div>
              <div class="agencies-nr">
                培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构...
              </div>
              <div class="agencies-img">
                <div class="agenciesImg-item">
                  <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                  <div class="agenciesImg-text">
                    图片描述水水水水水水水水水水水水水水文字2
                  </div>
                </div>
                <div class="agenciesImg-item">
                  <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                  <div class="agenciesImg-text">
                    图片描述水水水水水水水水水水水水水水文字2
                  </div>
                </div>
                <div class="agenciesImg-item">
                  <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                  <div class="agenciesImg-text">
                    图片描述水水水水水水水水水水水水水水文字2
                  </div>
                </div>
                <div class="agenciesImg-item">
                  <img src="@/assets/img/轮播图 2@2x.png" />
                  <div class="agenciesImg-text">
                    图片描述水水水水水水水水水水水水水水文字2
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-item">
        <div>
          <div class="title">
            <div class="title-item">
              <img class="iconcss" src="@/assets/icon/图标 1@2x.png" />
              &nbsp;&nbsp;&nbsp; 鉴定机构资质
            </div>
            <span class="gdCss"> 更多> </span>
          </div>
          <div class="agencies-item">
            <div class="agencies-right">
              <div class="agencies-title">某某培训机构</div>
              <div class="agencies-nr">
                培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构介绍文字描述培训机构...
              </div>
              <div class="agencies-img">
                <div class="agenciesImg-item">
                  <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                  <div class="agenciesImg-text">
                    图片描述水水水水水水水水水水水水水水文字2
                  </div>
                </div>
                <div class="agenciesImg-item">
                  <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                  <div class="agenciesImg-text">
                    图片描述水水水水水水水水水水水水水水文字2
                  </div>
                </div>
                <div class="agenciesImg-item">
                  <img src="@/assets/img/图片 7 Copy 4@1x.png" />
                  <div class="agenciesImg-text">
                    图片描述水水水水水水水水水水水水水水文字2
                  </div>
                </div>
                <div class="agenciesImg-item">
                  <img src="@/assets/img/轮播图 2@2x.png" />
                  <div class="agenciesImg-text">
                    图片描述水水水水水水水水水水水水水水文字2
                  </div>
                </div>
              </div>
            </div>
            <img style="margin-left: 30px" src="@/assets/img/图片 5@1x.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import carousel from "../components/carousel.vue";
</script>

<style lang="scss" scoped>
.content {
  // width: 1920px;
  // margin: auto;
  padding: 0 260px;
  box-sizing: border-box;
  .content-item {
    margin-top: 50px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 12px;
      border-bottom: 1px solid #bbbbbb;
      .title-item {
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 24px;
      }
      .iconcss {
        width: 32px;
        height: 32px;
      }
      .gdCss {
        cursor: pointer;
        font-size: 14px;
        &:hover {
          color: #409eff;
        }
      }
    }
    .mainCss {
      display: flex;
      .right {
        margin-top: 10px;
        padding-left: 20px;
        width: 100%;
        overflow: hidden;
        div {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .text {
          padding: 19px 0;
          border-bottom: 1px dashed #bbbbbb;
          .text-title {
            font-weight: bold;
            margin-bottom: 12px;
          }
          .text-nr {
            font-size: 14px;
            width: 70%;
          }
          .text-time {
            font-size: 12px;
            color: #929292;
          }
        }
        .text:last-child {
          border-bottom: none;
        }
      }
    }
    .exam-right {
      width: 100%;
      .exam-item {
        margin: 30px 0;
        display: flex;
        align-items: center;
        .dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #cccccc; // 灰色圆点
          margin-right: 12px;
          flex-shrink: 0; // 防止圆点在空间不足时变形
        }
        .exam-text {
          flex: 1; // 占据剩余空间
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-right: 12px;
        }

        .exam-time {
          font-size: 12px;
          color: #999999;
          flex-shrink: 0; // 防止时间在空间不足时被压缩
        }
      }
    }
    .imgbox {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
      gap: 30px 20px; /* 行间距30px，列间距最小20px */
      margin: 30px 0; /* 上下边距30px */

      .img-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 0;
        img {
          width: 100%;
          max-width: 210px;
          max-height: 170px;
          object-fit: cover;
          margin-bottom: 17px;
        }
        .img-text {
          text-align: center;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
          min-width: 0;
        }
      }
    }
    .agencies-item {
      padding: 40px 0;
      display: flex;
      img {
        width: 49%;
        max-width: 670px;
      }
      .agencies-right {
        flex: 1;
        padding-top: 20px;
        .agencies-title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 20px;
        }
        .agencies-nr {
          font-size: 14px;
          color: rgba(51, 51, 51, 0.5);
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          margin-bottom: 42px;
        }
        .agencies-img {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 20px;
          .agenciesImg-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 0;

            img {
              width: 100%;
              max-width: 158px;
              height: 109px;
              margin-right: 0;
              object-fit: cover;
              margin-bottom: 21px;
            }
            .agenciesImg-text {
              text-align: center;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
